<template>
  <el-card shadow="never" class="border-0">
    <!-- 新增刷新 -->
    <ListHeader @refresh="getData" @create="handleCreate"></ListHeader>

    <!-- <el-tree
      v-loading="loading"
      node-key="id"
      :default-expanded-keys="defaultExpandedKeys"
      :data="tableData"
      :props="{ label: 'name', children: 'chlid' }"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <el-tag size="small" :type="data.is_menu ? '' : 'info'">{{
            data.is_menu ? "菜单" : "权限"
          }}</el-tag>
          <el-icon v-if="data.icon" :size="16" class="ml-2">
            <component :is="data.icon"></component>
          </el-icon>
          <span> {{ data.name }}</span>

          <div class="ml-auto">
            <el-switch
              @click.stop
              v-model="data.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange($event, data)"
            />

            <el-button
              text
              type="primary"
              size="small"
              class="ml-10"
              @click.stop="handleEdit(data)"
            >
              修改
            </el-button>
            <el-button
              text
              type="primary"
              size="small"
              @click.stop="addChild(data.id)"
              >增加</el-button
            >
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(data.id)"
              title="确定要删除吗?"
            >
              <template #reference>
                <el-button text type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </template>
    </el-tree> -->

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="role_name" label="角色名稱" />

      <el-table-column prop="created_at" label="創建時間" />
      <el-table-column label="操作" width="350">
        <template #default="{ row }">
          <el-button size="small" text type="primary" @click="openSetRule(row)"
            >配置權限</el-button
          >
          <el-button size="small" text type="primary" @click="handleEdit(row)"
            >修改</el-button
          >

          <el-popconfirm
            title="是否要刪除?"
            confirm-button-text="確定"
            cancel-button-text="取消"
            @confirm="handleDelete(row.id)"
          >
            <template #reference>
              <el-button class="!m-0" text type="primary" size="small"
                >删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <FormDrawer ref="formDrawerRef" @submit="handleSubmit" :title="drawerTitle">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
        <el-form-item label="角色名稱" prop="role_name">
          <el-input v-model="form.role_name"></el-input>
        </el-form-item>
      </el-form>
    </FormDrawer>

    <!-- 权限配置 -->
    <FormDrawer
      ref="setRuleformDrawerRef"
      @submit="handlesetRuleSubmit"
      title="權限配置"
    >
      <el-form :model="form" ref="formRef" :rules="rules">
        <el-tree-v2
          ref="elTreeRef"
          :data="store.state.user"
          :props="{ label: 'name', children: 'child' }"
          show-checkbox
          :height="900"
          node-key="id"
          :default-expanded-keys="store.state.user.map((o) => o.id)"
          :check-strictly="true"
          @check="handleTreeCheck"
        >
          <template #default="{ node, data }">
            <div class="flex items-center">
              <el-tag v-if="data.child.length >= 1">菜單</el-tag>
              <span class="ml-2 text-sm">{{ data.name }}</span>
            </div>
          </template>
        </el-tree-v2>
      </el-form>
    </FormDrawer>
  </el-card>
</template>

<script setup>
import { computed, ref ,nextTick } from "vue";
import ListHeader from "~/components/ListHeader.vue";
import FormDrawer from "~/components/FormDrawer.vue";
import IconSelect from "~/components/IconSelect.vue";
import { useInitTable, useInitForm } from "~/composables/useCommon.js";
import { getRole, createRole, updateRole, deleteRole } from "~/api/role.js";
import { useStore } from "vuex";
import { fromJSON } from "postcss";
import { toast } from "../../composables/util.js";
const store = useStore();

const {
  tableData,
  getData,
  loading,
  curpage,
  total,
  limit,
  handleDelete,
  handleStatusChange,
} = useInitTable({
  getList: getRole,
  delete: deleteRole,
  updateStatus: updateRole,
});

const menus = store.state.user;
const {
  formDrawerRef,
  formRef,
  form,
  rules,
  drawerTitle,
  handleSubmit,
  handleCreate,
  handleEdit,
} = useInitForm({
  form: {
    role_name: "",
  },
  getData,
  rules: {
    role_name: [{ required: true, message: "名稱不能為空", trigger: "blur" }],
  },
  create: createRole,
  update: updateRole,
});

const setRuleformDrawerRef = ref(null);
const roleId = ref(0);
const defaultExpandedKeys = ref([]);
const elTreeRef = ref(null);
const rulesId = ref([]);
const openSetRule = (row) => {
  roleId.value = row.id;
  setRuleformDrawerRef.value.open();
  // rulesId.value = row.rule;
  
  setTimeout(() => {
    elTreeRef.value.setCheckedKeys(row.rule.map(v=>Number(v)));
  }, 150);
};

const handlesetRuleSubmit = () => {
  setRuleformDrawerRef.value.showLoading()
 
  updateRole(roleId.value,{rule_id:rulesId.value.toString()}).then(res=>{
    loading.value=true
      toast('配置成功')
    setRuleformDrawerRef.value.close()

  }).finally(err=>{
  loading.value=false
    
  })
};
const handleTreeCheck=(...e)=>{


   const {checkedKeys,halfCheckedKeys} =e[1]
   rulesId.value=[...checkedKeys,...halfCheckedKeys]
   
}
</script>

<style></style>
